<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.7.1.js"></script>
</head>
<body>
<form action="demo" method="post">
    账号：<input type="text" name="username"><br/>
    密码：<input type="password" name="password"><br/>
    <!-- button的type是button，跟表单是没有关系的 -->
    <!-- button的type是submit，那这个按钮代表的就是表单：会提交到demo这个地址 -->
    <!-- 而demo不存在，服务端就会响应404这个状态码 -->
    <button type="button" onclick="toLogin()">登录</button>
</form>
<script>
    function toLogin() {
        $.ajax({
            url: 'login',
            type: 'POST', // 如果这里改成GET，服务端会响应405的状态码
            data: {
                username: $("input[name='username']").val(),
                password: $("input[name='password']").val()
            },
            success: function (result) {
                /*console.log(result); // 字符串
                // 如果result是字符串，手动的解析字符串成JS的对象
                result = JSON.parse(result); // 转成对象结构
                console.log(result); // 对象*/
                if (result.status === true) {
                    location.href = 'success.html'
                } else if (result.status === false) {
                    alert(result.message)
                }
            },
            error: function (error) {
                alert('请求失败')
            }
        })
    }
</script>
</body>
</html>